
/* 使用请保留以下信息 */
/*  源码来源：https://www.bilibili.com/video/BV1dP4y1M7DF?share_source=copy_web */
/* 仅供大家学习交流用*/

* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
}
ul {
  width: 1200px;
  height: 600px;

  border-radius: 10px;
  /* 将盒子区域居中展示 */
  margin: 160px auto 0;
}

ul > li {
    
  height: 600px;
  float: left;
  border-radius: 10px;
}
input {
    /* 将input的样式隐藏 */
  display: none;
}
ul > li > label {
  display: block;
  width: 125px;
  height: 600px;
  border-radius: 10px;
  transition: 1.3s;
}
/* 点击事件label宽度变为700px */
ul > li > input:checked ~ label {
  width: 700px;
}
ul > li > .bj {
    /* opacity透明度为0 */
  opacity: 0;
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 调整层级 */
  z-index: -1;
  /* background: rgb(55, 52, 238); */
  /* 设置过渡时长 */
  transition: 2s;
  /* 设置边缘颜色融合 */
  filter: blur(4px);
}
/*  */
ul > li > input:checked ~ .bj{
    /* 点击label后背景图片透明度为1，在任意一个li上加个默认checked，则默认选中该图片背景。 */
    opacity: 1;
}
ul > li:nth-child(1) ,ul > li:nth-child(1) > .bj{
  background: url("https://img2.baidu.com/it/u=2258598068,25205447&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800") no-repeat center/cover;
}
ul > li:nth-child(2),ul > li:nth-child(2) > .bj {
  background: url("https://img0.baidu.com/it/u=316779398,3122752064&fm=253&fmt=auto&app=138&f=JPG?w=889&h=500") no-repeat center/cover;
}
ul > li:nth-child(3) ,ul > li:nth-child(3) > .bj{
  background: url("https://img1.baidu.com/it/u=499430010,754549942&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800") no-repeat center/cover;
}
ul > li:nth-child(4),ul > li:nth-child(4) > .bj {
  background: url("https://img2.baidu.com/it/u=3779309574,527729818&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800") no-repeat center/cover;
}
ul > li:nth-child(5) ,ul > li:nth-child(5) > .bj{
  background: url("https://img0.baidu.com/it/u=1254243499,2821019619&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500") no-repeat center/cover;
}


